<template>
    <div class="panel-shade">
        <!-- 遮罩 -->
        <div class="shade" v-show="show" :class="show? 'shade':''"></div>
        <!-- 面板 -->
        <div class="panel-setting" :class="show ? 'havewidth':'nowidth'">
            <div class="btn-flex" @click="showClick">
                <i v-show="show" class="iconfont icon-guanbi"></i>
                <i v-show="!show" class="iconfont icon-shezhi"></i>
            </div>
            <div class="custom-setting-item" v-show="show">
                <div class="title"><h1>项目配置</h1></div>
                <div class="division"><CustomTitle></CustomTitle></div>
                <div class="division"><CustomThems></CustomThems></div>
                <div class="division"><CustomAside></CustomAside></div>
                <div class="division"><CustomTag></CustomTag></div>
                <div class="division">
                    <el-button class="btn" type="warning" @click="exit">清空缓存并退出登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { clearCookie } from '@/utils'

import CustomTitle from './components/CustomTilt.vue'
import CustomAside from './components/CustomAside.vue'
import CustomTag from './components/CustomTag.vue'
import CustomThems from './components/CustomThems.vue'
export default {
    data () {
        return {
            show: false
        }
    },
    methods: {
        showClick () {
            this.show = !this.show
        },
        // 清空缓存
        exit () {
            clearCookie("token")
            clearCookie("THEME")
            clearCookie("Title")
            location.reload()  //强制刷新页面
        }
    },
    components: {
        CustomTitle,
        CustomAside,
        CustomTag,
        CustomThems
    }
}
</script>


<style>
    .shade {
        background-color: rgba(0,0,0,.2);
        backdrop-filter: blur(5px);
    }
</style>
<style lang="scss" scoped>
    @import "@/assets/scss/handle.scss";
    .panel-shade {
        position: relative;
        top: 0;
        left: 0;
        z-index: 999;
        .shade {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
        }
        .havewidth {
            width: 100%;
            max-width: 280px;
            transition: all .25s;
        }
        .nowidth {
            width: 0;
            max-width: 0px;
            transition: all .25s;
        }
        .panel-setting {
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            background-color: #fff;
            box-sizing: border-box;
            .btn-flex {
                position: absolute;
                top: 40%;
                left: -50px;
                width: 50px;
                height: 50px;
                cursor: pointer;
                border-radius: 20% 0% 0% 20%;
                display: flex;
                align-items: center;
                justify-content: center;/*水平居中*/
                @include bg_color("background_color1");
                .icon-shezhi {
                    font-size: 26px;
                    color: #fff;
                }
                .icon-guanbi {
                    font-size: 26px;
                    color: #fff;
                }
            }
            .custom-setting-item {
                color: rgba(0, 0, 0, .65);
                font-size: 16px;
                padding: 12px 12px;
                .title {
                    font-size: 12px;
                    padding: 10px 0px 10px 16px;
                }
                .division {
                    padding: 10px 16px;
                    width: 100%;
                    .btn {
                        width: 100%;
                    }
                }
            }
        }
    }
</style>